<!--
 * @Author: y001554
 * @Date: 2023-01-16 20:11:08
 * @LastEditors: y001554
 * @LastEditTime: 2023-09-03 14:49:07
 * @FilePath: \ylwl\src\demos\form.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by FE/ylwl, All Rights Reserved. 
-->

<template>
  <div style="padding: 0 10px">
    <div>配置表单</div>
    <h4>{{ form }}</h4>
    <div>
      <M-Form
        v-model="form"
        :inline="true"
        :rules="rules"
        size="small"
        :form-model="demo"
        :customer-props="prop"
        @submit="test"
      />
    </div>
    <!-- <StarFilled /> -->
    <button @click="test">test</button>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, Ref } from 'vue'
import { StarFilled } from '@element-plus/icons-vue'
import { ElButton, ElIcon } from 'element-plus'
// import utils from '@@/utils/index'
defineOptions({
  name: 'Demos'
})
const treevalue = ref('12')

const rules = ref({
  username: [{ required: true, message: '电风扇电风扇给的', trigger: 'blur' }],
  usergroup: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' }
  ]
})
const form = reactive({
  name123: 123
})
const prop = ref({
  showLabel: true,
  actionShow: true,
  row: {
    gutter: 10
  },
  col: {
    span: 12
    // xs: 24,
    // sm: 6,
    // md: 4,
    // lg: 3,
    // xl: 1
  }
})
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]
//士大夫撒旦
const demo = ref([
  {
    label: '级别',
    kayName: 'userlevel',
    type: 'upload',
    value: '预制的值',
    col: {
      span: 24
    }
  },
  {
    label: '姓名',
    kayName: 'username',
    type: 'input',
    labelAfter: (h, item) => {
      return h(ElIcon, [h(StarFilled)])
    }
  },
  {
    label: '名字',
    kayName: 'myname',
    type: 'select',
    autoLoadOptions: false,
    optionsPromise: (k: any, item: any, form: any) => {
      console.log('请求了')
      return new Promise((rol, rej) => {
        setTimeout(() => {
          rol([
            {
              value: '123',
              label: '一班'
            },
            {
              value: '456',
              label: '二班'
            }
          ])
        }, 2000)
      })
    },
    iProps: {
      onChange: (item) => {
        // debugger
        // form.userlevel = 1
      },
      filterable: true
    }
  },
  {
    label: '班级',
    kayName: 'userunit',
    type: 'radio',
    fProps: {
      style: 'display:flex;justify-content: center;'
    },
    autoLoadOptions: true,
    optionsPromise: (k: any, item: any, form: any) => {
      return new Promise((rol, rej) => {
        setTimeout(() => {
          rol([
            {
              value: '123',
              label: '一班'
            },
            {
              value: '456',
              label: '二班'
            }
          ])
        }, 2000)
      })
    },

    show: () => form.myname === '123'
  },
  {
    label: '兴趣爱好',
    kayName: 'userInterest',
    type: 'checkbox',
    options: [
      {
        value: '123',
        label: '篮球'
      },
      {
        value: '456',
        label: '羽毛球'
      }
    ]
  },
  {
    label: '入学时间',
    kayName: 'inTime',
    type: 'datePicker',
    fProps: {},
    iProps: {
      type: 'daterange',
      valueFormat: 'YYYY-MM-DD hh:mm:ss'
      // onChange: (d) => {
      //   if (!d) {
      //     ;(form as any).startTime = ''
      //     ;(form as any).endTime = ''
      //   } else {
      //     ;(form as any).startTime = d[0]
      //     ;(form as any).endTime = d[1]
      //   }
      // }
    },
    rangeKeys: ['startTime', 'endTime']
  },
  {
    label: '上课时间',
    kayName: 'workTime',
    type: 'timePicker',
    fProps: {},
    iProps: {
      // onChange: (d) => {
      //   if (!d) {
      //     ;(form as any).startTime = ''
      //     ;(form as any).endTime = ''
      //   } else {
      //     ;(form as any).startTime = d[0]
      //     ;(form as any).endTime = d[1]
      //   }
      // }
    },
    rangeKeys: ['startTime', 'endTime']
  },
  {
    label: '是否在读',
    kayName: 'inServe',
    type: 'switch',
    iProps: {
      'active-text': '是',
      'inactive-text': '否',
      'active-value': 1,
      'inactive-value': 0
    }
  },

  {
    label: '学号',
    kayName: 'usernumber',
    type: 'number',
    fProps: {},
    iProps: {
      onChange: (e: number) => {
        console.log(e)
      },
      clearable: true
      // style: 'width: 120px'
    }
  }
])

const test = (res: any) => {
  console.log('res', res)

  Object.assign(form, {
    userlevel: '动态修改',
    myname: '动态修改',
    userunit: '123'
  })
}

// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
